<style lang="scss" scoped="">
  #datafile {
      display: none;
    }
	table {
		width: 100%;
	}
    ol,ul,li{list-style: none;}
    .content{
      height: auto;
      width: 100%;
      margin-top: 10px ;
      padding: 0 20px;
    }
    .content ul{
      height: 60px;
      width: 100%;
      margin-bottom: 20px;
    }
    .content ul::after{
      content: '';
      display:inline-block;
      width: 100%;
      height: 1px;
      background: #D1DBE8;
      position: relative;top: -16px;
    }
    .content li{
      font-size: 15px;
      text-align: center;
      width:120px;
      float: left;
      height: 40px;
      line-height: 28px;
      margin: 10px 16px 0 0;
      cursor: pointer;
    }

    .checked{
      color:rgba(14, 135, 251, 1);
      border-bottom: 3px solid rgba(14, 135, 251, 1);
    }
</style>
<template>
  <div id="dataInfo">
    {{seversList}}
    <section class="content">
      <ul>
        <li :class="{checked: checked == 1}" @click="checked = 1"><Badge :count="applyinfo.datas.length">数据表</Badge></li>
        <li :class="{checked: checked == 2}" @click="checked = 2"><Badge :count="apiServiceDatas.length">开放平台接口</Badge></li>
        <li :class="{checked: checked == 3}" @click="checked = 3"><Badge :count="seversList.length">物理机概览</Badge></li>
      </ul>
      <div class="tables">
        <div v-if="checked == 1">
          <div class="gcontent" v-if="etlDataList.length > 0">
            <dataList v-model="etlDataList" :ifedit="true"></dataList>
          </div>
          <template v-else>
            <div class="gcontent" style="text-align:center">
              <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无数据资源</span>
            </div>
          </template>
        </div>
        <div v-show="checked == 2">
          <Table border :columns="apiServColumns"  :data="apiServiceDatas" >
            <template slot-scope=" { row, index }" slot="action">
              <Button type="primary" @click="getApiServInfo(row.apiCode)">详情</Button>
            </template>
          </Table>
          <apiServiceInfo v-model="showAPIServiceInfo" :apiTitle="apiTitle" :apiServInfo="apiServInfo"></apiServiceInfo>
        </div>
        <div v-show="checked == 3">
            <component ref="server_model" :is="'server_model'" v-model="seversList" :isApply="true"
              :ifedit="true" ></component>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import ajax from "../../../ajax_util"
  import Axios from 'axios'
  import dataBaseCatalog from './dataBaseCatalog'
  import showDataCatalog from './showDataCatalog'
  import excel from "../../../utils/excel";
  import dataList from './data_model.vue'
  import apiServiceInfo from '../apply_model/open_api_platform_model/apiServiceInfo.vue'
  import server_model from "../apply_model/server_model.vue"

  export default {
    name: "apply",
    components: {
      dataBaseCatalog,
      showDataCatalog,
      dataList, apiServiceInfo, server_model
    },
    data() {
      return {
        etlDataList:[],
        apiServiceDatas: [],
        showAPIServiceInfo: false, // 显示api详情model
        apiTitle: "", //api详情title
        apiServInfo: {},
        checked: 1,
        apiServColumns: [
          {
            title: '请求路径',
            key: 'requestUrl',
            width: 200,
          },
          {
            title: 'API中文名',
            key: 'apiLabel',
            width: 200,
          },
          {
            title: '描述',
            key: 'apiDescr',
            minWidth: 150
          },
          {
            title: "请求方法",
            key: "requestMethod",
            minWidth: 150
          },
          {
            title: "数据返回类型",
            key: "responseType",
            minWidth: 150
          },
          {
            title: "创建时间",
            key: "createDt",
            minWidth: 150
          },
          {
            title: "生效时间",
            key: "effDt",
            minWidth: 150
          },
          {
            title: "操作",
            key: "action",
            slot: "action",
            width: 80,
            align: 'center',
          }
        ],
        dataInfoEdit: 0,
        readonly: true, //是否只读
        labelWidth: 140,
        bealoonTrue: true,
        showModel: false,
        showTable: false,
        showData: {},
        showColumns: [],

        tableName: "",
        //数据相关基础信息
        dataInfo: {
          click: true,
          clickindex: [],
          columnsTitle: [
            "序号",
            "*字段名",
            "*字段类型",
            "*是否加密",
            "*是否必选",
            "字段必要性说明"
          ],
          columns: [{
              title: '序号',
              key: 'index',
              width: 60,
              slot: "index"
            },
            {
              title: '*字段名',
              key: 'fieldName',
              maxWidth: 160,
              slot: "fieldName"
            },
            {
              title: '*字段类型',
              key: 'fieldType',
              maxWidth: 160,
              slot: "fieldType"
            },
            {
              title: '*是否加密',
              key: 'isEncryption',
              maxWidth: 160,
              slot: "isEncryption"
            },
            {
              title: '*是否必选',
              key: 'isRequired',
              maxWidth: 160,
              slot: "isRequired"
            },
            {
              title: '字段必要性说明',
              key: 'remark',
              slot: "remark"
            },
            {
              title: ' ',
              slot: 'action',
              align: 'center',
              width: 150,
            },
          ]
        },
        applyinfo: this.Papply,
        showDataInfo: false,
        dataIndex: 0,
        showDataInfoList: [],
        showDataInfoName: "数据表",
        current: 1,
        showColumnsCurrent: 1, // 查看关联目录页码
        showColumnsList: [], //当前查看的目录集合
        apiServiceInfo: null, //开发平台申请接口数据
        ucxServiceinfo: null //ucx申请的数据
      }
    },
    created: function() {
      if (this.ifedit) {
        this.Papply.datas.forEach((item, index) => {
          this.dataInfo.clickindex.push(index)
        });
      }

      this.getEtlDataList()
    },
    mounted: function() {},
    methods: {
      /**
       * 获取数据采集交换工具申请的数据目录
       */
      getEtlDataList(){
        this.toolList.forEach(item =>{
          item.toolList.forEach(tool =>{
            if(tool.spServiceType == 'dataEtl' && tool.check && tool.spContent){
              this.etlDataList = tool.spContent.datas
            }else if(tool.spServiceType == 'openApiPlatform' && tool.check && tool.spContent){
              this.apiServiceDatas = tool.spContent.datas
            }
          })
        })
      },
      /**
       * 显示API详情
       * @param {Object} apiCode
       */
      getApiServInfo(apiCode) {
        this.showAPIServiceInfo = true
        this.apiTitle = apiCode
        // 调接口
        var that = this
        var params = {
          apiCode: apiCode
        }
        // 调接口
        this.myAjax.get({
          url: this.CONFIG.progress_url + '/open-api-platform/getApiServInfo',
          that: that,
          params: params,
          success: function(data) {
            that.apiServInfo = data
          }
        })
      },
      selectData() {
        this.$Modal.confirm({
          title: '提示',
          content: '请从数据目录选择表及字段，如不满足再申请自定义数据，否则审批不通过!',
          width: '360',
          onOk: () => {
            const el = document.getElementById("datafile");
            el.click();
          }
        });
      },
      async importData() {
        const el = document.getElementById("datafile");
        const file = el.files[0];
        var that = this

        var columns = [{
            title: "字段名",
            key: "fieldName"
          },
          {
            title: "字段类型",
            key: "fieldType"
          },
          {
            title: "是否加密",
            key: "isEncryption"
          },
          {
            title: "是否为必选字段",
            key: "isRequired"
          },
          {
            title: "备注",
            key: "remark"
          }
        ]
        var data = await excel.importFromLocalByData(file);
        data.forEach(item => {
          var list = excel.handleInfoByContent(item.body, columns, this)
          item.fields = list
        })
        data.forEach(item => {
          this.$set(item, "serviceId", 0)
          item.fields.forEach(field => {
            if (field.isEncryption == '是') {
              field.isEncryption = 1
            } else if (field.isEncryption == '否') {
              field.isEncryption = 0
            } else {
              field.isEncryption = ""
            }
            if (field.isRequired == '是') {
              field.isRequired = 1
            } else if (field.isRequired == '否') {
              field.isRequired = 0
            } else {
              field.isRequired = ""
            }
          })
          item.len = item.fields.length;
          console.log("---", item);
          this.applyinfo.datas.push(item)
        })

        that.$Notice.success({
          title: '导入成功',
        });
        console.log("projectList----- 0, A3:B5, 1--->", data, this.applyinfo.datas)
        el.value = "";
      },
      addData() {
        this.showModel = true;
        this.showTable = true;
      },
      cancelTable() {
        console.log("=====cancelTable====", this.applyinfo.datas);
        this.showModel = false;
        this.showTable = false;
        this.showDataInfo = false
      },
      saveTable() {
        this.applyinfo.datas = this.$refs.dataBaseCatalog.saveTable();

        for (var i = 0; i < this.applyinfo.datas.length; i++) {
          if (this.applyinfo.datas[i].serviceId != undefined && this.applyinfo.datas[i].serviceId != null && this.applyinfo
            .datas[
              i].serviceId != 0) {
            this.dataInfo.clickindex.push(i);
          }
        }
        this.showModel = false;
        this.showTable = false;
        console.log("=====saveTable====", this.applyinfo.datas);
      },
      saveColumns() {
        console.log("=====saveColumns====", this.applyinfo.datas);
        //this.showTable=true;
        //this.showTable=this.$refs.dataBaseCatalog.saveColumns();
        this.$refs.dataBaseCatalog.ok_columns();
      },
      return01() {
        this.$refs.dataBaseCatalog.return01();
      },
      getTableName(name) {
        console.log("----getTableName-------", name);
        this.tableName = name;
        //this.$forceUpdate();
      },
      showUpdateTime(date) {
        return this.utils.formatDate(new Date(date * 1000), "yyyy-MM-dd");
      },

      //数据清单
      addDataList() {
        this.$Modal.confirm({
          title: '提示',
          content: '请从数据目录选择表及字段，如不满足再申请自定义数据，否则审批不通过!',
          width: '360',
          onOk: () => {
            this.applyinfo.datas.push({
              tableName: "",
              purpose: "",
              cycleType: "",
              serviceId: 0,
              fields: [{
                fieldName: "",
                fieldType: "",
                isEncryption: 1,
                isRequired: 1,
                remark: "",
                id: 0,
                fieldServiceId: 0
              }],
              len: 1,
            })
            this.dataInfo.click = true;
            this.dataInfo.clickindex.push(this.applyinfo.datas.length - 1);
          }
        });
      },

      clicks(index) {
        if (this.dataInfo.clickindex.indexOf(index) != -1) {
          this.dataInfo.clickindex.splice(this.dataInfo.clickindex.indexOf(index), 1);
        } else {
          this.dataInfo.clickindex.push(index)
        }
        console.log(this.dataInfo.clickindex, this.dataInfo.click)
      },
      //校验数据清单
      validate() {
        var temp = this.applyinfo.datas
        var b = false
        console.log("validate--->", this.applyinfo.datas)
        if (this.applyinfo.datas != undefined && this.applyinfo.datas.length > 0) {
          this.applyinfo.datas.some((item, key) => {
            console.log("item-->", item)
            key = key + 1
            if (this.utils.objectIsEmpty(item.tableName) && item.serviceId == 0) {
              this.$Message.warning({
                content: "请填写第" + key + "张“申请数据清单”中的数据表名称",
                duration: 3
              })
              b = true
              return true
            }
            // else if (this.utils.objectIsEmpty(item.domain) && item.serviceId == 0) {
            // 	this.$Message.warning({
            // 		content: "请填写第" + key + "张“申请数据清单”中的所属域",
            // 		duration: 3
            // 	})
            // 	b = true
            // 	return true
            // }
            else if (this.utils.objectIsEmpty(item.purpose)) {
              console.log("item.purpose---->", item.purpose)
              this.$Message.warning({
                content: "请填写第" + key + "张“申请数据清单”中的数据表用途",
                duration: 3
              })
              b = true
              return true
            } else if (this.utils.objectIsEmpty(item.cycleType) && item.serviceId == 0) {
              this.$Message.warning({
                content: "请选择第" + key + "张“申请数据清单”中的更新周期",
                duration: 3
              })
              b = true
              return true
            } else if (item.serviceId == 0) {
              console.log("item=>", item);
              item.fields.some(i => {
                if (this.utils.objectIsEmpty(i.fieldName)) {
                  this.$Message.warning({
                    content: "请正确填写第" + key + "张“申请数据清单”中的字段名称",
                    duration: 3
                  })
                  b = true
                  return true
                } else if (this.utils.objectIsEmpty(i.fieldType)) {
                  this.$Message.warning({
                    content: "请正确填写第" + key + "张“申请数据清单”中的字段类型",
                    duration: 3
                  })
                  b = true
                  return true
                } else if (i.isEncryption === undefined || i.isEncryption === null || i.isEncryption === "") {
                  this.$Message.warning({
                    content: "请正确填写第" + key + "张“申请数据清单”中的是否加密",
                    duration: 3
                  })
                  b = true
                  return true
                } else if (i.isRequired === undefined || i.isRequired === null || i.isRequired === "") {
                  this.$Message.warning({
                    content: "请正确填写第" + key + "张“申请数据清单”中的是否必填",
                    duration: 3
                  })
                  b = true
                  return true
                }
              })
              if (b) {
                return true
              }
            }
          })
        }
        console.log("--data--->", b)

        return b;

      },
      //格式化日期
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        var hours = this.padDate(date.getHours());
        var minutes = this.padDate(date.getMinutes());
        var seconds = this.padDate(date.getSeconds());
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },
    },
    props: {
      toolList: {},
      seversList: {},
      ifedit: {},
      Papply: {},
      ishidden: {
        type: Boolean,
        default: false,
      },
      apiServiceList: {
        default: [],
      }
    },
    computed: {
      dataI() {
        return this.Papply.datas
      },
    },
    watch: {
      dataI() {
        if (this.ifedit) {
          this.Papply.datas.forEach((item, index) => {
            this.dataInfo.clickindex.push(index)
          });
        }
      },
    }

  }
</script>
